<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="data:,">  <!-- 指向空数据 URI -->
  <title>3D画廊</title>
  <!-- 1. 添加 importmap 声明 -->
  <!-- <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.155.0/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@0.155.0/examples/jsm/",
        "three/examples/": "https://unpkg.com/three@0.155.0/examples/" // 新增映射
      }
    }
    </script> -->
    <style>
      body { 
        margin: 0; 
        overflow: hidden;
        font-family: Arial, sans-serif;
      }
      #loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #333;
        font-size: 24px;
        z-index: 10;
      }
      #info {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 10px;
        border-radius: 5px;
        font-size: 14px;
      }
    </style>
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.155.0/build/three.module.js",
          "three/addons/": "https://unpkg.com/three@0.155.0/examples/jsm/",
          "three/examples/": "https://unpkg.com/three@0.155.0/examples/"
        }
      }
    </script>
  <!-- 2. 添加 ES 模块垫片（兼容旧浏览器） -->
  <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
</head>
<body>
  <div id="canvasContainer"></div>

  <!-- 其他脚本 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script> <!-- 新增 -->
  
  <div id="info">鼠标拖拽旋转视图 | 滚轮缩放 | WASD移动</div>
  <script type="module" src="./main.js"></script>
</body>
</html>